.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

body {
    background: #f0f0f0;
}

//头部
.header {
    z-index: 99;
    width: 100%;
    .px2rem(height, 80);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-bottom: 1px solid #CCCCCC;
    input {
        width: 94%;
        height: 60%;
        border: none;
        outline: none;
        border-radius: 5px;
        text-align: center;
        background: #e0e0e0 url(../img/sousuo.png) no-repeat left 38% center;
        background-size: 5%;
    }
}

//tab
.lists {
    width: 100%;
    .px2rem(margin-top, 80);
    .box {
        overflow: hidden;
        .banner {
            z-index: 99;
            width: 100%;
            .px2rem(height, 120);
            background: white;
            color: #828282;
            position: fixed;
            .px2rem(top,81);
            left: 0;
            .nav-list {
                div {
                    text-align: center;
                    figrue {
                        height: 100%;
                        text-align: center;
                        img {
                            .px2rem(margin-top,20);
                            .px2rem(height, 60);
                            .px2rem(width, 60);
                        }
                        p {
                            .px2rem(height,35);
                            .px2rem(line-height,35);
                            .px2rem(font-size, 20);
                            text-align: center;
                            font-weight: bolder;
                        }
                    }
                }
            }
        }
    }
}

.active {
    color: #ea3422 !important;
    border-bottom: 2px solid #ea3422;
}

.subject-list {
    .px2rem(margin-top,120 );
    .list_slide {
        width: 100%;
    }
}

.top{
    width: 100%;
    .px2rem(margin-bottom,10);
    .px2rem(height,360);
    img{
        width: 100%;
        .px2rem(height,360);
    }
}

.tab_list{
    width: 100%;
    display: flex;
    
    figure{
        width: 24%;
        .px2rem(height,200);
        background: white; 
        margin: 0 1%;
        h3{
            .px2rem(height,40);
            .px2rem(line-height,40);
            text-align: center;
            .px2rem(font-size,26);
            font-weight: bolder;
        }
        p{
            .px2rem(height,25);
            .px2rem(line-height,25);
            text-align: center;
            .px2rem(font-size,16);
            color: #444444;
        }
        div{
            width: 100%;
            .px2rem(height,125);
            img{
                width: 100%;
                .px2rem(height,125);
                
            }
        }
    }
}
.tab_lists{
    .px2rem(margin-top,10);
    width: 100%;
    display: flex;
    
    figure{
        width: 24%;
        .px2rem(height,200);
        background: white; 
        margin: 0 1%;
        h3{
            .px2rem(height,40);
            .px2rem(line-height,40);
            text-align: center;
            .px2rem(font-size,26);
            font-weight: bolder;
        }
        p{
            .px2rem(height,25);
            .px2rem(line-height,25);
            text-align: center;
            .px2rem(font-size,16);
            color: #444444;
        }
        div{
            width: 100%;
            .px2rem(height,125);
            img{
                width: 100%;
                .px2rem(height,125);
                
            }
        }
    }

}
.lunbo {
    img {
        width: 100%;
    }
}

//小点
.naton {
    display: flex;
    justify-content: flex-start;
}

//小点
.swiper-pagination-bullet-active {
    background: red !important;
}
//.tab_lists{
//  .px2rem(margin-top,10);
//  width: 100%;
//  display: flex;
//  
//  figure{
//      width: 24%;
//      .px2rem(height,200);
//      background: white; 
//      margin: 0 1%;
//      h3{
//          .px2rem(height,40);
//          .px2rem(line-height,40);
//          text-align: center;
//          .px2rem(font-size,26);
//          font-weight: bolder;
//      }
//      p{
//          .px2rem(height,25);
//          .px2rem(line-height,25);
//          text-align: center;
//          .px2rem(font-size,16);
//          color: #444444;
//      }
//      div{
//          width: 100%;
//          .px2rem(height,125);
//          img{
//              width: 100%;
//              .px2rem(height,125);
//              
//          }
//      }
//  }
//
//}

.Exhibition{
    width: 100%;
    .px2rem(height,346);
    .px2rem(margin-top,10);
    .px2rem(margin-bottom,10);
    background: white;
    .Exhibition_img{
        .px2rem(height,290);
        img{
            width: 100%;
            .px2rem(height,290);
            
        }
    }
    p{
        width: 100%;
        .px2rem(height,55);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        span{
            .px2rem(margin-right,20);
            .px2rem(font-size,22);
            color: #3cb17b;
            font-weight: bolder;
        }
    }
    
}
.bt{
    width: 96%;
    .px2rem(height,82);
    .px2rem(line-height,82);
    background: #e61414;
    margin: 0 auto;
    border-radius:4px;
    text-align: center;
    .px2rem(font-size,30);
    font-weight: bolder;
    color: white;
}

.bts{
    width: 96%;
    .px2rem(height,82);
    .px2rem(line-height,82);
    background: #3cb17b;
    margin: 0 auto;
    border-radius:4px;
    text-align: center;
    .px2rem(font-size,30);
    font-weight: bolder;
    color: white;
}
.list_of{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    .list_cont{
        width: 49%;
        .px2rem(height,580);
        background: white;
        .px2rem(margin-top,10);
        .px2rem(margin-bottom,10);
        .cont_img{
            width: 100%;
            .px2rem(height,370);
            img{
                width: 100%;
                .px2rem(height,370);
            }
        }
        p:nth-child(2){
            width: 90%;
            margin: 0 auto;
            .px2rem(height,95);
            .px2rem(line-height,30);
            .px2rem(padding-top,10);
            .px2rem(font-size,24);
            font-weight: bolder;
        }
        p:nth-child(3){
            width: 90%;
            margin: 0 auto;
            .px2rem(height,50);
            .px2rem(line-height,30);
            border-bottom: 1px solid #CCCCCC;
            span:nth-child(1){
                .px2rem(font-size,26);
                color: #e61414;
                font-weight: bolder;
            }
            span:nth-child(2){
                .px2rem(font-size,16);
                color: #666666;
                text-decoration: line-through;
            }
        }
        p:nth-child(4){
            width: 90%;
            margin: 0 auto;
            .px2rem(height,55);
            .px2rem(line-height,60);
            .px2rem(font-size,24);
            display: flex;
            justify-content: space-between;
            color: #666666;
            span:nth-child(1){
                .px2rem(padding-left,40);
                background: url(../img/bg-tianmao.png) no-repeat left center;
                background-size: 18px 18px;
            }
        }
    }
}
.kon{
    .px2rem(height,100);
    .px2rem(margin-top,5);
}

.footer {
    z-index: 99;
    .px2rem(height, 100);
    width: 100%;
    background: #f5f5f5;
    border-top: 1px solid #CCCCCC;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    figrue {
        width: 25%;
        text-align: center;
        img {
            .px2rem(height, 52);
            .px2rem(width, 52);
        }
        p {
            .px2rem(font-size, 20);
            color: #444444;
        }
        .actives {
            color: red;
        }
    }
}

.Empty_box {
    .px2rem(height, 100);
}